<template>
    <div class="infolist">
        <div class="add">
            <el-button type="primary" @click="dialogVisible = true ,isflag = true">新增</el-button>

            <el-dialog :title="isflag ? '添加学生信息' : '修改学生信息'" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                    <el-form-item label="姓名" prop="name" 
                    :rules="[
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ]">
                        <el-input v-model="formLabelAlign.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age"
                    :rules="[
                        { required: true, message: '请输入年龄', trigger: 'blur' }
                    ]">
                        <el-input v-model="formLabelAlign.age"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex"
                    :rules="[
                        { required: true, message: '请输选择性别', trigger: 'blur' }
                    ]">
                        <el-radio v-model="formLabelAlign.sex" label="1">男</el-radio>
                        <el-radio v-model="formLabelAlign.sex" label="2">女</el-radio>
                    </el-form-item>
                    <el-form-item label="父亲">
                        <el-input v-model="formLabelAlign.father"></el-input>
                    </el-form-item>
                    <el-form-item label="母亲">
                        <el-input v-model="formLabelAlign.mather"></el-input>
                    </el-form-item>
                    <el-form-item label="入学时间"
                    >
                        <el-date-picker
                            value-format="yyyy-MM-dd"
                            v-model="formLabelAlign.time"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="家庭住址" prop="address"
                    :rules="[
                        { required: true, message: '请输入家庭地址', trigger: 'blur' }
                    ]">
                        <el-input v-model="formLabelAlign.address"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="phone"
                    :rules="[
                        { required: true, message: '请输入联系电话', trigger: 'blur' }
                    ]">
                        <el-input v-model="formLabelAlign.phone"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="push">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="姓名" align: center> </el-table-column>
                <el-table-column prop="age" label="年龄" align: center> </el-table-column>
                <el-table-column prop="sex_text" label="性别" align: center> </el-table-column>
                <el-table-column prop="father" label="父亲" align: center> </el-table-column>
                <el-table-column prop="mather" label="母亲" align: center> </el-table-column>
                <el-table-column prop="time" label="入学时间" align: center> </el-table-column>
                <el-table-column prop="address" label="地址" align: center> </el-table-column>
                <el-table-column prop="phone" label="联系电话" align: center> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="edit(scope.row)">
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                            @click="del(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getTable , addTable , delTable , editTable} from '@/api/index.js'
export default {
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            labelPosition: 'right',
            formLabelAlign: {
                name: '',
                age: '',
                sex: '',
                father: '',
                mather: '',
                time: '',
                address: '',
                phone: '',
            },
            isflag: true,
        }
    },
    created() {
        this.getTableDate();
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                    this.formLabelAlign = {}
                })
                .catch(_ => { });
        },
        cancel(){
            this.dialogVisible = false
            this.formLabelAlign = {}
        },
        push() {
            if(this.isflag){
                addTable(this.formLabelAlign , this.isflag).then( res=>{
                this.$message({ message: '添加成功', type: 'success' });
              })
            } else{
                editTable(this.formLabelAlign).then( res=>{
                    this.$message({ message: '修改成功', type: 'success' });
                    
                })
            }
            this.getTableDate();
            this.dialogVisible = false
            this.formLabelAlign = {}
            
            //规则验证
            // this.$ewfs[formLabelAlign].validate( valid =>{
            //     if(valid){
            //         this.formLabelAlign = {}
            //         this.dialogVisible = false
            //     } else{
            //         this.$message({ message: '信息不完整', type: 'success'});
            //     }
            // })
            
        },
        del(row) {
            console.log(row);
            delTable(row.id).then(res => {
                console.log(res.data);
                if (res.data.status === 200) {
                    this.getTableDate();
                    this.$message({ message: '删除成功', type: 'success' });
                }
            })
        },
        edit(row){
            console.log(row);
            //打开弹窗
            this.dialogVisible = true
            //获取要修改的数据
            this.formLabelAlign = row
            //标题名称切换
            this.isflag = false
        },
        getTableDate() {
            getTable().then(res => {
                console.log(res.data);
                this.tableData = res.data.data;
                this.tableData.forEach(val => {
                    val.sex === '1' ? val.sex_text = '男' : val.sex_text = '女'
                })
            })
        }
    },

}

</script>

<style scoped lang="less">
.infolist {
    text-align: left;

    .add {
        margin: 10px 0;
    }

    /deep/.el-table .cell {
        text-align: center;
    }
}
</style>